<template>
    <div class="indexPage">
        <el-row :gutter="20">
            <el-col :span="24">
                <el-col :span="8">
                    <el-card class="elCard">
                        <section class="video-box">
                            <iframe class="iframe" :src="videoSrc" frameborder="0" v-show="cameraType==1"></iframe>
                            <div class="video"  id='video' v-show="cameraType==0"></div> <!--  -->
                        </section>
                        <div class="btnGroup">
                            <el-button type="success" size="mini" @click="openGate">开闸</el-button>
                            <el-button type="danger" size="mini" @click="closeGate">关闸</el-button>
                            <el-button type="primary" size="mini" @click="manualGate" v-if="laneType==1">手动入场</el-button>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card class="elCard">
                        <section class="video-box">
                            <el-image class="entrance" :src="entranceImg"></el-image>
                        </section>
                    </el-card>  
                </el-col>
                <el-col :span="8">
                    <el-card class="elCard cardIssue">
                        <el-col :span="24">
                            <!-- <plateNumber @getPlateLicense="getPlateLicense" :carNum='!unlicensed?form.carNum:""' :noLabel='true' :clickOutside="true" :key="timer" ></plateNumber> -->
                            <el-form ref="form" :model="form" class="formIssue" size="small">
                                <el-form-item label="车场名称：" label-width="100px" >
                                    <span>{{form.parkName}}</span>
                                </el-form-item>
                                <el-form-item label="选择通道：" label-width="100px" >
                                    <span class="laneList" v-for="(item,index) in laneData" :key="index">
                                        <el-tag class="elTag" :effect="activeIndex==index?'dark':'plain'" size="small" @click="handleLane(item,index)">{{item.name}}</el-tag>
                                    </span>
                                </el-form-item>
                                <el-form-item label="车牌号码："  label-width="100px" >
                                    <el-input v-model="form.carNum"  @focus="keyboardShow = true" ></el-input>
                                    <keyboard v-if="keyboardShow" :value="!unlicensed?form.carNum.split(''):[]" @input="cardChange" @closeKeyboard="closeKeyboard"></keyboard>
                                </el-form-item>
                                <el-form-item label="无车牌：" label-width="80px" v-if="unlicensed">
                                    <el-input v-model="form.carNum"></el-input>
                                </el-form-item>
                                <!-- <el-form-item class="elItem">
                                    <span>{{form.parkName}}</span>
                                    <span>{{form.laneName}}</span>
                                </el-form-item> -->
                                <el-col :span="14" style="padding:0">
                                    <el-form-item label="停车时长：" label-width="100px">
                                        <span>{{form.stopTime?form.stopTime:0}}</span>
                                    </el-form-item>
                                    <el-form-item label="收费金额：" label-width="100px">
                                        <span>{{form.payMoney?form.payMoney:0}}元</span>
                                    </el-form-item>
                                    <el-form-item  class="elFormItemFooter">
                                        <el-button type="primary" size="default" @click="btnIssue">下发车牌</el-button>
                                        <!-- <el-button type="primary" size="default" @click="">人工匹配</el-button> -->                                    
                                    </el-form-item>
                                </el-col>
                                <el-col :span="10" style="padding:0">
                                    <el-image class="qrImg" :src="qrImg"></el-image>
                                </el-col>
                                
                            </el-form>
                        </el-col>
                        <!-- <el-col :span="10" style="padding:0">
                            <el-image class="qrImg" :src="qrImg"></el-image>
                        </el-col> -->
                    </el-card>
                </el-col>
            </el-col>
            <el-col :span="24">
                <el-col :span="16">
                    <div class="curPark">
                        <span>当前车场：</span>
                        <span><i class="elIcon el-icon-location"></i>{{cityName}}</span>
                        <span><i class="elIcon el-icon-s-home"></i>{{groupName}}</span>
                        <span><i class="elIcon el-icon-s-shop"></i>{{companyName}}</span> 
                        <span><i class="elIcon el-icon-menu"></i>{{parkName}}</span>
                        <span @click="handleChangeProject">切换<i class="el-icon-sort elIconSort"></i></span>
                    </div>
                    <!-- <div class="tag">
                        <el-tag effect="plain" size="small"><i class="el-icon-arrow-left"></i></el-tag>
                        <span class="laneList" v-for="(item,index) in laneData" :key="index">
                            <el-tag class="elTag" :effect="activeIndex==index?'dark':'plain'" size="small" @click="handleLane(item,index)">{{item.name}}</el-tag>
                        </span>
                        <el-tag effect="plain" size="small"><i class="el-icon-arrow-right"></i></el-tag>
                    </div> -->
                    <div class="table" v-loading='loading'>
                        <el-table :data="tableData.records" height="410" style="width: 99.9%;" @row-click="rowClick">
                            <el-table-column prop="inTime" label="进场时间" width="180" align="center"></el-table-column>
                            <el-table-column prop="carNum" label="车牌" width="180"  align="center">
                                <template #header>
                                    <el-input
                                        v-model="search"
                                        size="mini"
                                        placeholder="搜索车牌">
                                        <el-button slot="append" icon="el-icon-search" @click="searchPark()"></el-button>
                                    </el-input>
                                </template>
                                <template slot-scope="scope">
                                    <span>{{scope.row.carNum}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="parkName" label="车场名称" align="center"></el-table-column>
                            <el-table-column prop="laneName" label="车道名称" align="center"></el-table-column>
                            <el-table-column label="操作" align="center">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="handleOut(scope.$index, scope.row)">修改车牌</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="fenye">
                            <el-pagination
                                background
                                @current-change="handleCurrentChange"
                                :current-page="params.pageNo"
                                :page-size="params.pageSize"
                                layout="total, prev, pager, next, jumper"
                                :total="tableData.total == ''? 0: tableData.total"
                            >
                            </el-pagination>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8" class="elCol">
                    <h3>出口异常车辆列表</h3>
                    <p class="sup">今日已处理：{{processedNum}}条 待处理：{{anomalyTableData.total == ''? 0: anomalyTableData.total}}条</p>
                    <div class="table">
                        <el-table :data="anomalyTableData.records" class="elTable" height="410" style="width: 99.9%;" @row-click="rowClickAnomaly">
                            <el-table-column prop="carNum" label="车牌号码" width="100"  align="center"></el-table-column>
                            <el-table-column prop="parkName" label="车场名称" min-width="200" align="center"></el-table-column>
                            <el-table-column label="车道名称" align="center">
                                <template slot-scope="scope">
                                    <span>{{scope.row.outLaneName?scope.row.outLaneName:''}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="状态" min-width="200" align="center">
                                <template slot-scope="scope">
                                    <span>{{scope.row.remarks?scope.row.remarks:'支付超时'}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" align="center">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click.stop="handleAnomaly(scope.$index, scope.row)">已处理</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="fenye">
                            <el-pagination
                                background
                                @current-change="handleCurrentChangeAnomaly"
                                :current-page="paramsAnomaly.pageNo"
                                :page-size="paramsAnomaly.pageSize"
                                layout="total, prev, pager, next, jumper"
                                :total="anomalyTableData.total == ''? 0: anomalyTableData.total"
                            >
                            </el-pagination>
                        </div>
                    </div>
                </el-col>
                
            </el-col>
        </el-row>
        <!-- 修改车牌 -->
        <el-dialog
            title="手动入场"
            :visible.sync="addCarDialogVisible"
            width="30%">
            <el-form ref="form" :model="formAdd" label-width="80px" size="mini">
                <el-form-item label="输入车牌">                    
                    <el-input v-model="formAdd.carNum" placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item label="入场时间"> 
                    <el-date-picker
                        class="fullWidth"
                        v-model="formAdd.inTime"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择入场时间">
                    </el-date-picker> 
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">                
                <el-button  @click="cancelAddCar">取 消</el-button>
                <el-button type="primary" @click="confirmAddCar">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 当前车场弹窗 -->
        <el-dialog
            title="提示"
            :visible.sync="projectDialogVisible"
            width="30%">
            <el-cascader :options="chechangTree" v-model="formInline"  @change="handleSelect" style="width:100%"></el-cascader>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="changeAsyncOK('formInline')">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 修改车牌 -->
        <el-dialog
            title="修改车牌"
            :visible.sync="carNumDialogVisible"
            width="30%">
            <el-form ref="form" :model="formTable" label-width="80px" size="mini">
                <el-form-item label="输入车牌">                    
                    <el-input v-model="formTable.carNum" placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item label="入场时间"> 
                    <el-date-picker
                        class="fullWidth"
                        v-model="formTable.inTime"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择入场时间">
                    </el-date-picker> 
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">                
                <el-button  @click="cancelCarNum">取 消</el-button>
                <el-button type="primary" @click="confirmCarNum">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 下发车牌 -->
        <el-dialog
            title="下发车牌"
            :visible.sync="issueDialogVisible"
            width="30%">
            <h4 style="margin-bottom: 10px;text-align:center;">确认下发车辆：{{form.carNum}}</h4>
            <el-form ref="form" :model="formIssue" label-width="80px" size="mini">
                <el-form-item label="语音内容：" label-width="120px">
                    <el-select v-model="formIssue.voiceSelect" placeholder="请选择语音内容">
                        <el-option :label="item" :value="item" v-for="item in voiceList" :key='item'></el-option>
                        <!-- <el-option label="请倒车2米后重新识别" :value="2"></el-option> -->
                    </el-select>
                </el-form-item>
                <el-form-item label="车场名称：" label-width="120px">
                    <span>{{form.parkName}}</span>
                </el-form-item>
                <el-form-item label="车道名称：" label-width="120px">
                    <span>{{form.laneName}}</span>
                </el-form-item>
                <el-form-item label="停车时长：" label-width="120px">
                    <span>{{form.stopTime?form.stopTime:0}}</span>
                </el-form-item>
                <el-form-item label="收费金额：" label-width="120px">
                    <span>{{form.payMoney?form.payMoney:0}}元</span>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer"> 
                <el-button type="primary" @click="confirmIssue">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
function getCascaderObj(val,opt) {
    return val.map((value, index) =>{
        for (var itm of opt) {
            if (itm.id == value) { opt = itm.children; return itm; }
        }
        return null;
    });
}
//鄂E78651
let obj = {}
function getChildObj(val,opt) {
    for (let i = 0; i < opt.length; i++) {
        let itm = opt[i];
        if(itm.id == val){
            //debugger
            obj = itm
            return obj
        }
        if(itm.children&&itm.children.length){
            getChildObj(val,itm.children)
        }
    }
    return obj
}
/**
 * 扩展Array方法, 去除数组中空白数据
 */
Array.prototype.notempty = function() {
    var arr = [];
    this.map(function(val, index) {
        //过滤规则为，不为空串、不为null、不为undefined，也可自行修改
        if (val !== "" && val != undefined) {
            arr.push(val);
        }
    });
    return arr;
}
import vzsdk from 'vzsdk'
import plateNumber from '@/components/common/plateNumber'
import keyboard from '@/components/common/keyboard.vue'
import { mapGetters } from "vuex"
export default {
    components: {
        plateNumber,
        keyboard
    },
    data(){
        return {
            keyboardShow:false,
            timerInterval:'',
            player: '',
            videoSrc: '',
            entranceImg:'',
            qrImg:'',//require("../../assets/images/codePic.png"),
            form:{
                depId:'',
                carNum:"",
                id:"",
                parkName:'',
                laneName:'',
                stopTime:0,
                payMoney:0,
            },
            search:"",
            searchVal:"",
            params:{
                depId:'',
                carNum:'',
                pageNo:1,
                pageSize:6
            },
            laneParams:{
                depId:'',
                pageNo:1,
                pageSize:10
            },
            parkId:'', //当前车场ID
            laneId:'', //当前车道ID
            laneData:[],
            laneType:0,
            activeIndex:0,
            loading:false,
            tableData:{
                total:0,
                records:[]  //鄂E78651
            },
            paramsAnomaly:{
                pageNo:1,
                pageSize:6
            },
            anomalyTableData:{
                total:0,
                records:[]
            },
            processedNum:0,
            cityId:'',
            groupId:'',
            companyId:'',
            xParkId:'',
            cityName:'',
            groupName:'',
            companyName:'',
            parkName:'',
            projectDialogVisible:false,
            carNumDialogVisible:false,
            formTable:{
                id:'',
                carNum:'',
                inTime:''
            },
            // 选中的id
            formInline: [],
            //   选中的对象
            selectObj: [],
            chechangTree: [],
            timer:'',
            vedioSN:'',//7f82777b-c1e96d12
            cameraType:0,
            issueDialogVisible:false,
            voiceList:[],
            isCue:1,
            formIssue:{
                voiceSelect:'',
                laneId:'',
                recordId:'',
                voice:''
            },
            addCarDialogVisible:false,
            formAdd:{
                depId:'',
                carNum:'',
                inTime:''
            }
        }
    },
    computed: {
        ...mapGetters(["userInfo",'parkInfo']),
        unlicensed(){
            let mobile_mode=/^1[345678]\d{9}$/;
            if(mobile_mode.test(this.form.carNum)){
                return true
            }else{
                return false
            }
        }
    },
    created(){
        let config = {
            accessKey: {
                id: 'GvRF3NjB22y653uX38grGqUkq6k6BKBL',
                secret: 'PNQsZXJPkjgShz8UWfUGkqi4xkR30cd2'
            },
            endpoint: 'https://www.vzicar.com'
        }
        vzsdk.init(config)

        this.getOrgTree()
        /* console.log(this.parkInfo,'parkInfo') */
        this.form.depId = this.parkInfo.id
        this.params.depId = this.parkInfo.id
        this.laneParams.depId = this.parkInfo.id
        this.cityId = this.parkInfo.parentList[0].id
        this.groupId = this.parkInfo.parentList[1].id
        this.companyId = this.parkInfo.parentList[2].id
        this.xParkId = this.form.depId
        this.cityName = this.parkInfo.parentList[0].departName
        this.groupName = this.parkInfo.parentList[1].departName
        this.companyName = this.parkInfo.parentList[2].departName
        this.parkName = this.parkInfo.departName
        this.getAnomalyList()
        this.timerInterval = setInterval(this.getAnomalyList, 10000);

        this.getVoiceList()
    },
    mounted () {
        
        this.getLaneList();
    },
    methods:{
        closeKeyboard(){
            this.keyboardShow = false
        },
        cardChange (arr) {
            let str = ''
            if (arr && arr.length) {
                for (let i = 0; i < arr.length; i++) {
                str += arr[i]
                }
                this.form.carNum = str
            } else {
                this.form.carNum = ''
            }
        },
        // 开闸
        openGate(){
            let id = this.laneId
            let formData = new FormData();
            formData.append('id',id)
            this.$api.home.gateOpen(formData).then(res=>{
                if(res.data.code == 200){
                    this.$message.success('开闸'+res.data.message);
                }else{
                    this.$message.error(res.data.message);
                }
            }).catch((res) => {
                this.loading = false;
            });
        },
        // 关闸
        closeGate(){
            let id = this.laneId
            let formData = new FormData();
            formData.append('id',id)
            this.$api.home.gateClose(formData).then(res=>{
                if(res.data.code == 200){
                    this.$message.success('关闸'+res.data.message);
                }else{
                    this.$message.error(res.data.message);
                }
            }).catch((res) => {
                this.loading = false;
            });
        },
        // 手动开闸
        manualGate(){
            this.addCarDialogVisible = true
            this.formAdd.depId = this.form.depId
            this.formAdd.carNum = ''
            console.log(this.$utils.formatDate(new Date(),'YYYY-MM-DD HH:mm:ss'),'formatDate')
            this.formAdd.inTime = this.$utils.formatDate(new Date(),'YYYY-MM-DD HH:mm:ss')
            console.log(this.formAdd.inTime,'formAdd.inTime')
        },
        cancelAddCar(){
            this.addCarDialogVisible = false
        },
        confirmAddCar(){
            console.log(this.formAdd,'this.formAdd')
            if(this.formAdd.carNum == ''){
                this.$message.error('请输入车牌号')
                return
            }else if(this.formAdd.carNum.length < 7){
                this.$message.error('请输入正确的车牌号')
                return
            }else if(this.formAdd.inTime ==""){
                this.$message.error("请选择入场时间");
                return
            }
            this.$api.home.addPresentCar(this.form).then(res=>{
                if(res.data.code == 200){
                    this.addCarDialogVisible = false
                    this.$message.success(res.data.message);
                }else{
                    this.$message.error(res.data.message);
                }
            }).catch((res) => {
                this.loading = false;
            });
        },
        //项目切换
        async handleChangeProject(){
            await this.getOrgTree()
            this.projectDialogVisible = true
        },
        // 获取组织机构树
        getOrgTree(){
            this.$api.home.getTree().then(res=>{
                //debugger
                if(res.data.code == 200){
                    let resultArry = res.data.result
                    if (resultArry && resultArry.length) {
                        for (let i = 0; i < resultArry.length; i++) {
                            resultArry[i].label = resultArry[i].title
                            resultArry[i].value = resultArry[i].id
                            if (resultArry[i].children && resultArry[i].children.length) {
                                for (let j = 0; j < resultArry[i].children.length; j++) {
                                    resultArry[i].children[j].label = resultArry[i].children[j].title
                                    resultArry[i].children[j].value = resultArry[i].children[j].id
                                    if (resultArry[i].children[j].children && resultArry[i].children[j].children.length) {
                                        for (let p = 0; p < resultArry[i].children[j].children.length; p++) {
                                            resultArry[i].children[j].children[p].label = resultArry[i].children[j].children[p].title
                                            resultArry[i].children[j].children[p].value = resultArry[i].children[j].children[p].id
                                            if (resultArry[i].children[j].children[p].children && resultArry[i].children[j].children[p].children.length) {
                                                for (let k = 0; k < resultArry[i].children[j].children[p].children.length; k++) {
                                                    resultArry[i].children[j].children[p].children[k].label = resultArry[i].children[j].children[p].children[k].title
                                                    resultArry[i].children[j].children[p].children[k].value = resultArry[i].children[j].children[p].children[k].id
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        } 
                        //console.log(resultArry,'getTree')                                        
                        this.chechangTree = resultArry
                    }   
                    this.formInline = [this.cityId, this.groupId, this.companyId, this.xParkId]
                }else{
                    this.$message.error(res.data.message)
                }
            }).catch(error=>{
                this.$message.error(error)
            })
        },
        handleSelect (value) {
            this.selectObj = getCascaderObj(this.formInline, this.chechangTree);
        },
        //项目确认
        changeAsyncOK(formInline){
            if (this.formInline[this.formInline.length - 1] === this.xParkId) {
                this.projectDialogVisible = false
            } else {
                if (this.selectObj[this.selectObj.length - 1].orgCategory !== 4) {
                    this.$message.error('请选择车场')
                } else {
                    if (this.selectObj.length === 4) {
                        this.cityName = this.selectObj[0].title
                        this.groupName = this.selectObj[1].title
                        this.companyName = this.selectObj[2].title
                        this.parkName = this.selectObj[3].title
                        this.projectDialogVisible = false                        
                        this.cityId = this.selectObj[0].value
                        this.groupId = this.selectObj[1].value
                        this.companyId = this.selectObj[2].value
                        this.xParkId = this.selectObj[3].value
                        this.form.depId = this.selectObj[3].value
                    }else if(this.selectObj.length === 3){
                        this.groupName = this.selectObj[0].title
                        this.companyName = this.selectObj[1].title
                        this.parkName = this.selectObj[2].title
                        this.projectDialogVisible = false  
                        this.groupId = this.selectObj[0].value
                        this.companyId = this.selectObj[1].value
                        this.xParkId = this.selectObj[2].value
                        this.form.depId = this.selectObj[2].value
                    }else if(this.selectObj.length === 2){
                        this.companyName = this.selectObj[0].title
                        this.parkName = this.selectObj[1].title
                        this.projectDialogVisible = false  
                        this.companyId = this.selectObj[0].value
                        this.xParkId = this.selectObj[1].value
                        this.form.depId = this.selectObj[1].value
                    }else if(this.selectObj.length === 1){
                        this.parkName = this.selectObj[0].title
                        this.projectDialogVisible = false
                        this.xParkId = this.selectObj[0].value
                        this.form.depId = this.selectObj[0].value
                    }
                    this.laneParams.depId = this.xParkId
                    this.getLaneList()
                }
            }
        },
        //获取车道列表
        getLaneList(){
            this.$api.home.getLaneList(this.laneParams).then(res=>{
                //debugger
                if(res.data.code == 200){
                    this.laneData = res.data.result.records
                    this.laneType = this.laneData[0].type
                    this.laneId = this.laneData[0].id
                    this.parkId = this.laneData[0].parkId 
                    this.cameraType = this.laneData[0].cameraType
                    this.form.laneName = this.laneData[0].name
                    //debugger                  
                    if(this.cameraType==1){
                        this.videoSrc = this.laneData[0].videoUrl
                    }else{
                        if(this.vedioSN!=this.laneData[0].serialNumber){
                            this.player&&this.player.stop()
                            this.vedioSN = this.laneData[0].serialNumber
                            this.$nextTick(()=>{
                                this.player = vzsdk.createPlayer({
                                    type: 'flv',
                                    sn: this.vedioSN,
                                    dom: 'video'
                                })                   
                                this.player.start()
                            })
                        }
                    }
                    
                    this.getQrCode()
                }else{
                    this.laneData = []
                    this.$message.error(res.data.message)
                }
            }).catch(error=>{
                this.$message.error(error)
            })
        },
        //车道点击
        handleLane(item,index){
            this.activeIndex = index
            this.laneType = item.type
            this.laneId = item.id
            this.parkId = item.parkId
            this.cameraType = item.cameraType
            this.form.laneName = item.name
            if(this.cameraType==1){
                this.videoSrc = item.videoUrl
            }else{
                if(this.vedioSN!=item.serialNumber){
                    this.player&&this.player.stop()
                    this.vedioSN = item.serialNumber
                    this.$nextTick(()=>{
                        this.player = vzsdk.createPlayer({
                            type: 'flv',
                            sn: this.vedioSN,
                            dom: 'video'
                        })
                        this.player.start()
                    })
                }
                
            }
            this.getQrCode()
            //console.log(item,'handleLane')
        },
        //获取二维码
        getQrCode(){
            let param = {
                parkId:this.parkId,
                laneId:this.laneId
            }
            this.$api.home.getQrCode(param).then(res=>{
                //debugger
                if(res.data.code == 200){
                    this.qrImg = 'data:image/png;base64,' + res.data.result
                }else{
                    this.$message.error(res.data.message)
                }
            }).catch(error=>{
                this.$message.error(error)
            })
        },
        //table row点击事件 //鄂E78651
        rowClick(row, column, event){
            //debugger
            this.activeIndex = 0
            this.entranceImg = row.imgUrl
            this.timer = new Date().getTime()
            this.form.carNum = row.carNum
            this.$store.dispatch('setCarNum', this.form.carNum)  
            this.form.id = row.id
            this.form.parkName = row.parkName
            this.form.laneName = row.laneName
            this.form.stopTime = row.rstayTime
            this.form.payMoney = row.payMoney
            let parkData = {},companyData = {},groupData = {},cityData={};  //depId
            parkData = getChildObj(row.depId, this.chechangTree)
            this.parkName = parkData.label
            this.xParkId = parkData.id
            this.laneParams.depId = this.xParkId
            this.getLaneList()       
            //debugger
            if(parkData.parentId){
                companyData = getChildObj(parkData.parentId, this.chechangTree)
                this.companyName = companyData.label
                this.companyId = companyData.id
            }
            if(companyData.parentId){
                groupData = getChildObj(companyData.parentId, this.chechangTree)
                this.groupName = groupData.label
                this.groupId = groupData.id
            }
            if(groupData.parentId){
                cityData = getChildObj(groupData.parentId, this.chechangTree)
                this.cityName = cityData.label
                this.cityId = cityData.id
            }   
        },
        rowClickAnomaly(row, column, event){
            this.activeIndex = 0
            this.entranceImg = row.outImgUrl
            this.timer = new Date().getTime()
            this.form.carNum = row.carNum
            this.$store.dispatch('setCarNum', this.form.carNum)  
            this.form.id = row.id
            this.form.parkName = row.parkName
            this.form.laneName = row.outLaneName?row.outLaneName:row.laneName
            this.form.stopTime = row.rstayTime
            this.form.payMoney = row.payMoney
            let parkData = {},companyData = {},groupData = {},cityData={};  //depId
            parkData = getChildObj(row.depId, this.chechangTree)
            this.parkName = parkData.label
            this.xParkId = parkData.id
            this.laneParams.depId = this.xParkId
            this.getLaneList()       
            //debugger
            if(parkData.parentId){
                companyData = getChildObj(parkData.parentId, this.chechangTree)
                this.companyName = companyData.label
                this.companyId = companyData.id
            }
            if(companyData.parentId){
                groupData = getChildObj(companyData.parentId, this.chechangTree)
                this.groupName = groupData.label
                this.groupId = groupData.id
            }
            if(groupData.parentId){
                cityData = getChildObj(groupData.parentId, this.chechangTree)
                this.cityName = cityData.label
                this.cityId = cityData.id
            }
        },
        getPlateLicense(data){
            //console.log(data,"carNum")
            this.form.carNum = data
        },
        //搜索车牌 //鄂E78651
        searchPark(carNum){
            //debugger
            if(carNum){
                this.params.carNum = carNum
                this.search = carNum
            }else{                
                this.params.carNum = this.search
            }
            //debugger
            this.loading = true
            this.$api.home.getCarList(this.params).then(res=>{
                if(res.data.code == 200){
                    this.tableData = res.data.result
                }else{
                    this.tableData.records = []
                    this.$message.error(res.data.message)
                }
                this.loading = false
            }).catch(error=>{
                this.$message.error(error)
            })
        },
        //分页页码切换
        handleCurrentChange(val) {
            this.params.pageNo = val;
            this.searchPark();
        },
        //修改车牌
        handleOut(index,row){
            this.formTable.id = row.id
            this.formTable.carNum = row.carNum
            this.formTable.inTime = row.inTime
            this.carNumDialogVisible = true
        },
        confirmCarNum(){
            if(this.formTable.carNum == ''){
                this.$message.error('请输入车牌号')
                return
            }else if(this.formTable.carNum.length < 7){
                this.$message.error('请输入正确的车牌号')
                return
            }else if(this.form.inTime ==""){
                this.$message.error("请选择入场时间");
                return
            }
            let formData = new FormData();
            formData.append('id',this.formTable.id)
            formData.append('carNum',this.formTable.carNum)
            formData.append('inTime',this.formTable.inTime)
            this.$api.home.updataCarNum(formData).then(res=>{               
                if(res.data.code == 200){
                    this.cancelCarNum();
                    this.params.pageNo = 1
                    this.searchPark(this.formTable.carNum);
                }else{
                    this.$message.error(res.message);
                }
            }).catch((res) => {
                this.loading = false;
            });
        },
        cancelCarNum(){
            //this.carNumTable = ''
            this.carNumDialogVisible = false
        },
        //分页页码切换
        handleCurrentChangeAnomaly(val) {
            this.paramsAnomaly.pageNo = val;
            this.getAnomalyList();
        },
        //获取值班室异常记录
        getAnomalyList(){
            this.checkManagerChar();
            this.$api.home.getAnomalyList(this.paramsAnomaly).then(res=>{
                if(res.data.code == 200){
                    //debugger
                    if(res.data.result.records.length>0&&this.isCue==0){
                        //debugger
                        let audio = new Audio()
                        audio.src = "https://img.tukuppt.com/newpreview_music/08/99/14/5c88e51168d3728345.mp3"
                        audio.play();
                    }                    
                    this.anomalyTableData = res.data.result
                }else{
                    this.anomalyTableData.records = []
                    this.$message.error(res.data.message)
                }
                this.loading = false
            }).catch(error=>{
                this.$message.error(error)
            })
        },
        //值班室今日异常已处理数量
        checkManagerChar(){
            this.$api.home.checkManagerChar().then(res=>{
                if(res.data.code == 200){
                    this.processedNum = res.data.result
                }else{
                    this.processedNum = 0
                    this.$message.error(res.data.message)
                }
                this.loading = false
            }).catch(error=>{
                this.$message.error(error)
            })
        },
        // 异常处理
        handleAnomaly(index,row){
            this.$confirm('确认此异常已处理?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$api.home.handleAnomaly({id:row.id}).then(res=>{
                    if(res.data.code == 200){
                        this.getAnomalyList();
                        this.$message.success(res.data.message)
                    }else{
                        this.$message.error(res.data.message)
                    }
                    this.loading = false
                }).catch(error=>{
                    this.$message.error(error)
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
            });
        },
        // 鄂E78651
        btnIssue(){
            this.issueDialogVisible = true
        },
        getVoiceList(){
            this.$api.home.getSetInfo().then(res=>{
                //debugger
                let data = res.data
                if(data.code==200){
                    this.voiceList = data.result.voice?data.result.voice.split(',').notempty():[]
                    this.isCue = data.result.isCue
                }else{
                    this.$message.error(data.message)
                }
            }).catch(error=>{
                this.$message.error(error)
            })
        },
        // 确认下发
        confirmIssue(){
            let params = {
                laneId:this.laneId,
                recordId:this.form.id,
                voice:this.formIssue.voiceSelect
            }
            let formData = new FormData()
                formData.append('laneId',params.laneId)
                formData.append('recordId',params.recordId)
                formData.append('voice',params.voice)
            this.$api.home.confirmIssue(formData).then(res=>{
                if(res.data.code == 200){
                    this.issueDialogVisible = false
                    this.$message.success(res.data.message)
                }else{
                    this.$message.error(res.data.message)
                }
                this.loading = false
            }).catch(error=>{
                this.$message.error(error)
            })
        }
    },
    destroyed(){
        clearInterval(this.timerInterval)
    }
}
</script>
<style lang="less" scoped>
    .indexPage{
        height:100%;
        /deep/ .elCard{
            position: relative;
            height:390px;
            .el-card__body{
                padding: 0;
                .qrImg{
                    vertical-align: middle;
                }
            }
            .entrance{
                width: 100%;
                height: 370px;
            }
            .video{
                width: 100%;
                height:390px;
            }
            .video-box {
                width: 100%;
                height:390px;
            }
            .btnGroup{
                position: absolute;
                bottom: 10px;
                left: 10px;
            }
            .el-form-item {
                margin-bottom: .5rem;
            }
            .elItem{
                .el-form-item__content{                    
                    display: flex;
                    justify-content: space-between;
                }
            }
            &.cardIssue{
                padding: 15px 0px;
                box-sizing: border-box;
            }
            .elFormItemFooter{
                text-align: center;
            }
            
        }
        .curPark{
            margin-top:10px;
            .elIcon{
                margin-left:5px;
                color:#3485EC;
            }
            .elIconSort{
                padding: 5px 2px;
                margin-left: 5px;
                transform: rotate(90deg);
                background-color: #3485EC;
                color: #fff;
                border-radius: 3px;
            }
        }
        /deep/ .tag{
            margin-top:10px;
            .el-tag{
                cursor: pointer;
            }
        }
        /deep/ .table{
            width: 100%;
            margin-top:20px;
            overflow: auto;
            .elTable{
                //max-height:410px;
            }

        }
        .elCol{
            margin-top:10px;
            text-align: center;
            .sup{
                margin-top: 15px;
            }
            .fenye{
                text-align: left; 
            }
        }
        .laneList{
            .elTag{
                margin-right:3px;
            }
        }
        .iframe{
            width: 100%;
            height:100%
        }
    }
</style>